<template>
  <div class="operationLog">
    <div class="relative">
      <el-row :gutter="20">
        <el-col :span="12">
          <TitleName
            title="操作记录"
            icon="i-carbon-bookmark-filled"
            class="title"
          ></TitleName>
        </el-col>
        <el-col :span="12" style="display: flex">
          <el-date-picker
            v-model="queryForm.operationTime"
            type="daterange"
            format="YYYY-MM-DD"
            valueFormat="YYYY-MM-DD"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            @change="init"
            class="w-full mr-5"
          />
          <el-button
            type="primary"
            plain
            icon="Download"
            @click="handleDownload"
            >导出</el-button
          >
        </el-col>
      </el-row>
    </div>
    <!-- table 表格 -->
    <el-table
      ref="tableRef"
      class="mt-10px"
      :data="tableData"
      border
      v-loading="tableLoading"
      stripe
      style="width: 100%"
    >
      <el-table-column label="操作时间" prop="operationTime">
        <template #default="scope">
          <span>{{ parseTime(scope.row.operationTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="operator" label="操作人员" />
      <el-table-column prop="operationType" label="操作类型"> </el-table-column>
      <el-table-column prop="fieldName" label="操作内容" />
      <el-table-column prop="oldValue" label="操作前" />
      <el-table-column prop="newValue" label="操作后" />
      <el-table-column prop="remark" label="备注" />
    </el-table>
    <pagination
      class="h-45px"
      v-show="tableTotal > 0"
      :total="tableTotal"
      v-model:page="queryForm.pageNum"
      v-model:limit="queryForm.pageSize"
      @pagination="getList"
    />
  </div>
</template>
<script setup name="OperationLog">
import { reactive, toRefs } from 'vue'
import * as Api from '@/api/common/common.js'
import { format } from 'date-fns'
const { proxy } = getCurrentInstance()
const props = defineProps({
  // 查询参数
  tableParam: {
    required: true
  }
})
const data = reactive({
  queryForm: {
    pageNum: 1,
    bidOpeningTime: [],
    pageSize: 10,
    operationTime: [
      format(new Date().getTime(), 'yyyy-MM-dd'),
      format(new Date().getTime(), 'yyyy-MM-dd')
    ]
  },

  tableLoading: false,
  tableTotal: 0,
  tableParams: {
    pageNum: 1,
    pageSize: 10
  },
  tableData: []
})
const { queryForm, tableLoading, tableTotal, tableData } = toRefs(data)
watch(
  () => props.tableParam,
  val => {
    init()
  },
  {
    deep: true,
    immediate: true
  }
)
/**
 * 初始化方法
 */
async function init() {
  queryForm.value = { ...queryForm.value, ...props.tableParam }
  await getList()
}
function getList() {
  tableLoading.value = true
  let param = JSON.parse(JSON.stringify(queryForm.value))
  if (
    queryForm.value.operationTime &&
    JSON.stringify(queryForm.value.operationTime) != '[]' &&
    JSON.stringify(queryForm.value.operationTime) != undefined
  ) {
    param.operationStartTime = queryForm.value.operationTime[0] + ' 00:00:00'
    param.operationEndTime = queryForm.value.operationTime[1] + ' 23:59:59'
  } else {
    param.operationStartTime = ''
    param.operationEndTime = ''
  }
  delete param.operationTime
  Api.getOperaList(param).then(res => {
    tableLoading.value = false
    tableData.value = res.rows
    tableTotal.value = res.total
  })
}
// 导出
const handleDownload = () => {
  let param = JSON.parse(JSON.stringify(queryForm.value))
  if (
    queryForm.value.operationTime &&
    JSON.stringify(queryForm.value.operationTime) != '[]' &&
    JSON.stringify(queryForm.value.operationTime) != undefined
  ) {
    param.operationStartTime = queryForm.value.operationTime[0] + ' 00:00:00'
    param.operationEndTime = queryForm.value.operationTime[1] + ' 23:59:59'
  } else {
    param.operationStartTime = ''
    param.operationEndTime = ''
  }
  delete param.operationTime
  delete param.pageNum
  delete param.pageSize
  proxy.downLoadByUrl(
    '/system/Opera/export',
    param,
    `操作日志_${new Date().getTime()}.xlsx`
  )
}
</script>
